<template>
  <view class="tn-bg-gray-light">
    <tn-toast ref="toast"></tn-toast>
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
            @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    <tn-swiper :list="swiperList" mode="number" :height="400"></tn-swiper>
    <view class="tn-margin">
      <!--   标题     -->
      <view class="tn-flex tn-flex-row-between">
        <view class="justify-content-item tn-text-bold tn-text-xxl">
          {{ houseInfo.title }}
        </view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-margin-top">
        <view class="tn-color-purplered">
          <!--     价格     -->
          <view>
              <text class="tn-text-bold tn-text-xxl" style="color: #FF9903">￥{{ houseInfo.price }}</text>
              <text class="tn-text-sm tn-color-gray tn-margin-left-xs">/月</text>
          </view>
          <view class="tn-padding-top-lg">
            <!--   房屋详情页的标签     -->
            <tn-tag v-for="(item,index) in houseInfo.label"  :key="index" marginLeft="10rpx" size="sm" backgroundColor="shadow tn-bg-gray--light tn-margin-left-sm" fontColor="tn-color-gray--dark" :fontSize="20">
              {{item}}
            </tn-tag>
          </view>
        </view>
        <view class="justify-content-item tn-color-gray tn-padding-top-xs">
        <!--   联系电话按钮       -->
          <view>
              <tn-button @click="callPhone(houseInfo.phone)" shape="round" size="lg" :fontSize="48" backgroundColor="tn-shadow-indigo tn-main-gradient-indigo--reverse" width="110rpx" height="110rpx" fontColor="#ffffff">
                <text class="tn-icon-tel"></text>
              </tn-button>
          </view>
          <button open-type="getPhoneNumber" @getphonenumber="getUserProfile" class="login-Btn">微信授权</button>
        </view>
      </view>
    </view>
    <!-- 边距间隔 -->
    <view class="">
      <!--   房屋规格说明     -->
      <view class="tn-padding tn-flex tn-margin">
        <view class="tn-flex-direction-column tn-col-4 tn-margin-left-sm tn-text-center" style="border-right: 1px solid #f8f7f8">
          <view>
            <text class="tn-text-sm tn-text-bold" style="color: #03D3C1;">朝向 - {{ houseInfo.direction}}</text>
          </view>
          <view class="tn-margin-top-xs">
            <text class="tn-text-xs tn-color-gray">朝向</text>
          </view>
        </view>
        <view class="tn-flex-direction-column tn-col-4 tn-margin-left-sm tn-text-center" style="border-right: 1px solid #f8f7f8">
          <view>
            <text class="tn-text-sm tn-text-bold" style="color: #03D3C1;">{{ houseInfo.area }}m²</text>
          </view>
          <view class="tn-margin-top-xs">
            <text class="tn-text-xs tn-color-gray">面积</text>
          </view>
        </view>
        <view class="tn-flex-direction-column tn-col-4 tn-margin-left-sm tn-text-center" style="border-right: 1px solid #f8f7f8">
          <view>
            <text class="tn-text-sm tn-text-bold" style="color: #03D3C1;">{{ houseInfo.floor }}/</text><text class="tn-text-sm tn-color-gray">
            {{ houseInfo.totalFloor }}</text>
          </view>
          <view class="tn-margin-top-xs">
            <text class="tn-text-xs tn-color-gray">楼层</text>
          </view>
        </view>
        <view class="tn-flex-direction-column tn-col-4 tn-margin-left-sm tn-text-center">
          <view>
            <text class="tn-text-sm tn-text-bold" style="color: #03D3C1;">{{houseInfo.checkIn}}</text>
          </view>
          <view class="tn-margin-top-xs">
            <text class="tn-text-xs tn-color-gray">入住</text>
          </view>
        </view>
      </view>
    </view>
    <view>
      <view class="tn-padding">
        <map id="map" style="width: 100%;" :arrowLine="true" show-location="true" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
      </view>
      <view class="tn-margin-top-sm">
          <text class="tn-margin tn-text-lg tn-text-bold">配置设施</text>
      </view>
      <tn-scroll-list :indicator="false">
        <view class="tn-padding tn-flex" style="margin-left: -30rpx">
          <view class="tn-flex-direction-column tn-margin-left-xs tn-text-center" v-for="(item,index) in houseInfo.facility" :key="index">
            <image :src="`https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/detail/${getChineseHeadLetter(item)}.png`" style="width: 50rpx;height: 50rpx"/>
            <view class="tn-margin-top-xs" style="width: 150rpx">
              <text class="tn-text-xs tn-color-gray">{{ item }}</text>
            </view>
          </view>
        </view>
      </tn-scroll-list>
      <view class="tn-margin-top-sm">
          <view class="tn-col-11 tn-padding-sm tn-flex" style="background: #D2F9F9;margin: 0 auto;border-radius: 14rpx">
            <tn-avatar src="https://img2.huashi6.com/images/resource/a365/2022/04/21/11427_26745445918.jpg?imageMogr2/quality/75/interlace/1/thumbnail/x700/gravity/Center/crop/700x700/format/jpeg"></tn-avatar>
            <view class="tn-flex tn-flex-direction-column">
              <text class="tn-margin-left-sm tn-text-bold tn-text-sm">智行房东</text>
              <text class="tn-margin-left-sm tn-text-xs tn-color-gray tn-margin-top-xs">清楚房源特色，专业挑选好房</text>
            </view>
            <view class="tn-margin-top-sm" style="margin-left: 130rpx">
              <tn-button size="sm" shape="round" :plain="true"  backgroundColor="#03D3C1" fontColor="#03D3C1">联系看房</tn-button>
            </view>
          </view>
      </view>
      <tn-tabs
          :list="list"
          :isScroll="false"
          inactiveColor="#aaaaaa"
          activeColor="#080808"
          :current="current"
          name="tabName"
          :bold="true"
          @change="tabChange"></tn-tabs>
		<view v-if="current==0">
			<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
				<view v-for="(item,index) in icon2List" :key="index" class="tn-margin-left-sm tn-bg-gray--light tn-flex tn-col-3 flex tn-flex-col-center tn-flex-row-center tn-flex-direction-column" style="height: 150rpx;border-radius: 18rpx;">
					<image :src="item.icon" style="width: 50rpx;height: 50rpx;"/>
					<text class="tn-text-bold tn-text-sm tn-margin-top-xs">{{item.lable}}</text>
					<text class="tn-text-bold tn-color-gray tn-text-xs tn-margin-top-xs">{{item.lable2}}</text>
				</view>
			</view>
			<view class="tn-margin-top-sm tn-margin-left-lg">
				<text class="tn-text-lg tn-text-bold">看过此房间的人还看了</text>
			</view>
			<tn-scroll-list :indicator="false">
			  <view class="tn-padding tn-flex" style="margin-left: -30rpx">
			    <view style="height: 400rpx;width: 300rpx;background: #f4f6f8;border-bottom-right-radius: 15rpx;border-bottom-left-radius: 15rpx;" class="tn-flex tn-flex-direction-column tn-margin-left-sm" v-for="(item,index) in list2" :key="index">
			      <image :src="item.icon" style="width: 300rpx;height: 230rpx;border-top-left-radius: 18rpx;border-top-right-radius: 18rpx;"/>
			      <text class="tn-text-bold tn-text-sm tn-padding-left-xs tn-padding-top-sm">{{item.title}}</text>
				  <text class="tn-text-xs tn-color-gray  tn-padding-left-xs tn-padding-top-sm">{{item.desc}}</text>
				  <text class="tn-padding-left-xs tn-padding-top-sm tn-color-orange tn-text-lg">￥{{item.price}}<text class="tn-color-gray tn-text-sm">/月</text></text>
			    </view>
			  </view>
			</tn-scroll-list>
		</view>
    <view v-else class="tn-margin-top-sm">
      <view class="tn-col-11" style="margin: 0 auto;">
        <map id="map" style="width: 100%;height: 400rpx" show-location="true" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
      </view>
      <tn-scroll-list :indicator="false">
        <view class="tn-padding tn-flex" style="margin-left: -30rpx">
          <view style="height: 400rpx;width: 300rpx;background: #f4f6f8;border-bottom-right-radius: 15rpx;border-bottom-left-radius: 15rpx;" class="tn-flex tn-flex-direction-column tn-margin-left-sm" v-for="(item,index) in list2" :key="index">
            <image :src="item.icon" style="width: 300rpx;height: 230rpx;border-top-left-radius: 18rpx;border-top-right-radius: 18rpx;"/>
            <text class="tn-text-bold tn-text-sm tn-padding-left-xs tn-padding-top-sm">{{item.title}}</text>
            <text class="tn-text-xs tn-color-gray  tn-padding-left-xs tn-padding-top-sm">{{item.desc}}</text>
            <text class="tn-padding-left-xs tn-padding-top-sm tn-color-orange tn-text-lg">￥{{item.price}}<text class="tn-color-gray tn-text-sm">/月</text></text>
          </view>
        </view>
      </tn-scroll-list>
    </view>
    </view>
    <view class="footerfixed dd-glass tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm">
      <tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroups" buttonType="round" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
    </view>
    <view class='tn-tabbar-height'></view>
    <tn-toast ref="toast"></tn-toast>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import {getChineseHeadLetter} from '@/utils/str'
export default {
  name: 'listDetail',
  mixins: [template_page_mixin],
  data(){
    return {
      id: 0,
	    markers: [],
      longitude: 113.38351,
      latitude: 23.164707,
      cardCur: 0,
      houseInfo: {},
      icon2List:[
      {lable: "品质生活",lable2: "配套设备齐全",icon: "https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/detail/detail-icon.png"},
      {lable: "贴心服务",lable2: "维修保洁",icon: "https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/detail/detail-icon2.png"},
      {lable: "热心房东",lable2: "处理各种琐事",icon: "https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/detail/detail-icon3.png"}
      ],
      list: [
        {tabName: '服务介绍'},
        {tabName: '附近房源'}
      ],
      list2:[
        {price: 2460,title: "龙兴园北区 朝南-主卧",desc:"合租 | 3室一厅 | 28m²",icon: "https://pimage.cqcb.com/d/file/hot/2021-05-18/42b82d2b91c10672625ca9bdcfde122f.jpg"},
        {price: 2460,title: "龙兴园北区 朝南-主卧",desc:"合租 | 3室一厅 | 28m²",icon: "https://imgs.bzw315.com/uploadfiles/version2/8/20150902/20150902_141333_3588.jpg"},
        {price: 2460,title: "龙兴园北区 朝南-主卧",desc:"合租 | 3室一厅 | 28m²",icon: "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0821%2F1141a46cj00qy6uxz006ec000k000f0m.jpg&thumbnail=650x2147483647&quality=80&type=jpg"}
      ],
      swiperList: [
        {image: 'https://i9.hexun.com/2019-03-22/196584759.jpg',title: "123"},
        {image: 'https://pic1.58cdn.com.cn/gongyu/n_v2338e7b31d43d464ea189330cb153d874_cd1c6cc50592da41.jpg',title: "123"},
        {image: 'https://img.zcool.cn/community/01eb765da1f50ba80121b72223708c.jpg@2o.jpg',title: "123"},
        {image: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0821%2F1141a46cj00qy6uxz006ec000k000f0m.jpg&thumbnail=650x2147483647&quality=80&type=jpg',title: "123"},
        {image: 'https://img.zcool.cn/community/01f7015c9ad284a801208f8b4be134.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100',title: "123"},
      ],
      current: 0,
      countOptions: [{
        icon: 'star',
        text: '收藏'
      },{
        icon: 'share-circle',
        text: '分享',
      }],
      customButtonGroups: [{
        text: '预约看房',
        backgroundColor: 'tn-cool-bg-color-5--reverse',
        color: '#FFFFFF'
      },{
        text: '立即签约',
        backgroundColor: 'tn-cool-bg-color-8--reverse',
        color: '#FFFFFF'
      }],
      covers: [{
		    id: 1,
        latitude: 23.164707,
        longitude: 113.38351,
        iconPath: 'https://blog-1253935418.cos.ap-guangzhou.myqcloud.com/cloud/detail/static/location.png'
      }]
    }
  },
  onLoad(data) {
    this.$api.getHouse({id: data.id}).then(res =>{
        if (res.success){
          res.data.label = res.data.label.split(",")
          res.data.facility = res.data.facility.split(",")
          let temp = [];
          let split = res.data.imgList.split(",");
          for (let i = 0; i<split.length; i++){
            temp.push({
              image: split[i]
            })
          }
          this.houseInfo = res.data;
          res.data.imageList = temp;
        }else{
          this.$refs.toast.show({
            title: '系统异常',
            content: '系统异常请联系管理员',
            icon: 'error',
            duration: 1900
          })
        }
    })
  },
  mounted() {
  },
  methods: {
    getUserProfile(e) {
      // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

    },
    getChineseHeadLetter(str){
      var chineseHeadLetter = getChineseHeadLetter(str);
      return chineseHeadLetter;
    },
    callPhone(phone){
      console.log(phone)
      uni.makePhoneCall({
        phoneNumber: phone + "",
      });
    },
    goBack() {
      // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
      uni.reLaunch({
        url: '/pages/index'
      })
    },
    onOptionClick(res){
      this.$refs.toast.show({
        title: '成功',
        content: '即将跳转到订单页面',
        icon: 'success',
        image: '',
        duration: 1500
      })
    },
    onButtonClick(res){
      this.$refs.toast.show({
        title: '成功',
        content: '即将跳转到订单页面',
        icon: 'success',
        image: '',
        duration: 1500
      })
    },
    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
    // tab选项卡切换
    tabChange(index) {
      this.current = index
    },
    getRandomCoolBg() {
      return this.$t.colorUtils.getRandomCoolBgClass()
    }
  }
}
</script>

<style lang="scss" scoped>
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
}

/* 用户头像 start */
.logo-image {
  width: 110rpx;
  height: 110rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 10rpx;
  overflow: hidden;
  // background-color: #FFFFFF;
}

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

/* 轮播视觉差 start */
.card-swiper {
  height: 750rpx !important;
}

.card-swiper swiper-item {
  width: 750rpx !important;
  left: 0rpx;
  box-sizing: border-box;
  // padding: 0rpx 30rpx 90rpx 30rpx;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(1);
  transition: all 0.2s ease-in 0s;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
}

.image-banner{
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-banner image{
  width: 100%;
  height: 100%;
}

/* 轮播指示点 start*/
.indication{
  z-index: 9999;
  width: 100%;
  height: 36rpx;
  position: absolute;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}

.spot{
  background-color: #FFFFFF;
  opacity: 0.6;
  width: 10rpx;
  height: 10rpx;
  border-radius: 20rpx;
  top: -60rpx;
  margin: 0 8rpx !important;
  position: relative;
}

.spot.active{
  opacity: 1;
  width: 30rpx;
  background-color: #FFFFFF;
}

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
/* 标题 start */
.nav_title {
  -webkit-background-clip: text;
  color: transparent;

  &--wrap {
    position: relative;
    display: flex;
    height: 120rpx;
    font-size: 46rpx;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
    background-size: cover;
  }
}
/* 标题 end */

/* 底部tabbar start*/
.footerfixed{
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
  background-color: #FFFFFF;
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 45rpx;
    padding: 10rpx 30rpx;
    margin: 20rpx 20rpx 5rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}
/* 标签内容 end*/

/* 内容图 start */
.content-backgroup {
  z-index: -1;

  .backgroud-image {
    border-radius: 15rpx;
    width: 100%;
  }
}
/* 内容图 end */

/* 商家商品 start*/
.tn-blogger-content {
  &__wrap {
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
    border-radius: 20rpx;
    margin: 15rpx;
  }

  &__info {
    &__btn {
      margin-right: -12rpx;
      opacity: 0.5;
    }
  }

  &__label {
    &__item {
      line-height: 45rpx;
      padding: 0 10rpx;
      margin: 5rpx 18rpx 0 0;

      &--prefix {
        color: #E83A30;
        padding-right: 10rpx;
      }
    }

    &__desc {
      line-height: 35rpx;
    }
  }

  &__main-image {
    border-radius: 16rpx 16rpx 0 0;

    &--1 {
      max-width: 690rpx;
      min-width: 690rpx;
      max-height: 400rpx;
      min-height: 400rpx;
    }

    &--2 {
      max-width: 260rpx;
      max-height: 260rpx;
    }

    &--3 {
      height: 212rpx;
      width: 100%;
    }
  }

  &__count-icon {
    font-size: 24rpx;
    padding-right: 5rpx;
  }
}

.image-book{
  padding: 150rpx 0rpx;
  font-size: 16rpx;
  font-weight: 300;
  position: relative;
}
.image-picbook{
  background-size: cover;
  background-repeat:no-repeat;
  // background-attachment:fixed;
  background-position:top;
  border-radius: 15rpx 15rpx 0 0;
}

/* 毛玻璃*/
.dd-glass {
  width: 100%;
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
}
</style>
